<template>
  <a-card :bordered="false">

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('cxm-订单记录信息')">导出</a-button> -->
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <!-- <a-button type="primary" icon="import">导入</a-button> -->
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">-->
<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择-->
<!--        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--      </div>-->

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="handleEdit(record)" style="margin-right: 10px;">修改</a-button>
          <a-button @click="showModal(record)">作废</a-button>
          <a-modal v-model="visible2" title="作废提示" @ok="getInfo(recordInfo)">
            <p>是否对该条记录进行作废？作废后将无法恢复！</p>
          </a-modal>
        </span>
        <span
          slot="filterDepositAttribute"
          slot-scope="depositAttribute"
        >{{ depositAttribute | filterDepositAttribute(depositAttribute) }}</span>
      </a-table>
    </div>

    <!-- table区域-end -->
    <!-- 表单区域 -->
    <!-- <cxmOrderManager-modal ref="modalForm" @ok="modalFormOk"></cxmOrderManager-modal> -->
    <Agreement-modal ref="modalForm" @ok="modalFormOk"></Agreement-modal>
  </a-card>
</template>

<script>
import AgreementModal from './AgreementModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import moment from 'moment'
import { postAction } from '@api/manage'
export default {
  name: 'Agreement',
  mixins: [JeecgListMixin],
  components: {
    AgreementModal,
    JInput,
    moment,
  },
  data() {
    return {
      description: 'sale-审批人设置',
      visible: false,
      visible2: false,
      // 表头
      columns: [
        {
          title: '补充协议',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 250,
          scopedSlots: {
            customRender: 'action',
          },
        },
      ],

      url: {
        list: '/sale/cxmSaleBaseInfo/list?dataType=' + 10,
        delete: '/sale/cxmSaleBaseInfo/delete',
        deleteBatch: '/sale/cxmSaleBaseInfo/deleteBatch',
        exportXlsUrl: 'sale/cxmSaleBaseInfo/exportXls',
        importExcelUrl: 'sale/cxmSaleBaseInfo/importExcel',
      },
      recordInfo:{}
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${process.env.VUE_APP_BASE_API}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    showModal(record) {
      this.visible2 = true;
      this.recordInfo = record
    },
    getInfo(recordInfo) {
      /* this.$refs.cxmOrderManagerInfoModal.showDrawer(record) */
      let url = this.url.delete + '?id=' + recordInfo.id
      postAction(url)
        .then((res) => {
          console.log(res)
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.loadData()
          this.visible2 = false
        })
    }
  },
  filters: {
    filterTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    filterDepositAttribute(depositAttribute) {
      switch (depositAttribute) {
        case "1":
          return "可退"
          break;
        case "2":
          return "不可退"
          break;
        case "3":
          return "有条件可退"
          break;
      }
    }
  },
}
</script>

<style scoped>
@import "~@assets/less/common.less";
</style>